<template>
  <div class="screen-box">
    <div class="screen-li">
      <span class="screen-name">任务名称：</span>
      <el-input
        v-model="taskValue"
        placeholder="请输入名称"
        style="width: 170px"
      ></el-input>
    </div>
    <div class="screen-li">
      <span class="screen-name">客户名称：</span>
      <el-input
        v-model="customerValue"
        placeholder="请输入名称"
        style="width: 170px"
      ></el-input>
    </div>
    <div class="screen-li">
      <span class="screen-name">进度：</span>
      <el-select
        v-model="scheduleValue"
        placeholder="请选择进度"
        style="width: 170px"
      >
        <el-option
          v-for="item in scheduleOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="screen-li">
      <span class="screen-name">业务环节：</span>
      <el-select
        v-model="processValue"
        placeholder="请选择环节"
        style="width: 170px"
      >
        <el-option
          v-for="item in processOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <el-button type="primary" icon="el-icon-search" class="screen-btn"
      >查询</el-button
    >
  </div>
</template>
<script>
export default {
  name: "screenBox",
  components: {},
  data() {
    return {
      taskValue: "", // 任务名称
      customerValue: "", // 客户名称
      scheduleValue: "", // 进度值
      scheduleOptions: [
        { value: "1", label: "黄金糕" },
        { value: "2", label: "双奶" },
      ],
      processValue: "", // 环节值
      processOptions: [
        { value: "1", label: "黄金糕" },
        { value: "2", label: "双奶" },
      ],
    };
  },
  methods: {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.screen-box {
  display: flex;
  padding: 20px 30px;
  border-bottom: 1px solid #e9e8ed;
  .screen-li {
    margin-right: 20px;
    display: flex;
    align-items: center;
    /deep/ .el-input__icon {
      line-height: 30px;
    }
    /deep/ .el-input__inner {
      color: #606266;
      height: 30px;
      line-height: 30px;
      background: #ffffff;
      border-radius: 4px;
    }
    .screen-name {
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #333333;
    }
  }
  .screen-btn {
    width: 88px;
    height: 33px;
    padding: 9px 13px;
    background: #00998b;
    border-radius: 4px;
  }
}
/deep/ .el-select .el-input .el-select__caret.el-input__icon::before {
  content: "\e790";
  position: absolute;
  width: 100%;
  color: #00998b;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
